<template>
    <div class="detail-popup">
        <popup
            ref="popupRef"
            :title="popupTitle"
            :async="true"
            width="1000px"
            confirm-button-text="确认保存"
            @confirm="handleSubmit"
            @close="handleClose"
        >
            <el-form ref="formRef" :model="formData" label-width="84px" :rules="formRules">
                <el-steps :active="active" finish-status="success">
                    <el-step title="基本信息" />
                    <el-step title="单位职务" />
                    <el-step title="工龄其他" />
                    <el-step title="工资相关" />
                    <el-step title="调动相关" />
                </el-steps>
                <div v-if="active === 0">
                <!-- 步骤一的内容 -->
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="姓名" >
                            <el-input
                                v-model="formData.realname"
                                placeholder="请输入姓名"
                                clearable
                            />
                        </el-form-item>     
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="民族" >
                            <el-select  v-model="formData.Nation">
                                        <el-option v-for="(item, key) in optionData.nation" :key="key" :label="item.name"
                                            :value="item.value" />
                                    </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="性别">
                            <el-radio-group v-model="formData.gender" class="ml-4">
                                <el-radio :label="1">男</el-radio>
                                <el-radio :label="2">女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="出生日期">
                            <el-date-picker v-model="formData.BirthDay" type="date"/>
                        </el-form-item>
					</el-col>
                    <el-col :span="8">
                        <el-form-item label="籍贯">
                            <el-input v-model="formData.NativePlace" clearable />
                        </el-form-item>
					</el-col>
                    <el-col :span="8">
                        <el-form-item label="血型">
                            <el-select v-model="formData.BloodType">
                                <el-option v-for="(item, key) in optionData.BloodType" :key="key" :label="item.name"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
					</el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="出生地">
                            <el-input v-model="formData.NativePlace" clearable />
                        </el-form-item>
					</el-col>
                    <el-col :span="8">
                        <el-form-item label="成长地">
                            <el-input v-model="formData.GrowingPlace" clearable />
                        </el-form-item>
					</el-col>
                    <el-col :span="8">
                        <el-form-item label="户籍所在地">
                            <el-input v-model="formData.ResidenceDomain" clearable />
                        </el-form-item>
					</el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="所在地补充">
                            <el-input v-model="formData.ResidenceOther" clearable />
                        </el-form-item>
					</el-col>
                    <el-col :span="8">
                        <el-form-item label="身份证号">
                            <el-input v-model="formData.IdCard" clearable />
                        </el-form-item>
					</el-col>
                    <el-col :span="8">
                        <el-form-item label="婚姻状况">
                            <el-select v-model="formData.MaritalStatus">
                                <el-option v-for="(item, key) in optionData.MaritalStatus" :key="key" :label="item.name"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
					</el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="健康状况">
                            <el-select v-model="formData.HealthStatus">
                                <el-option v-for="(item, key) in optionData.HealthStatus" :key="key" :label="item.name"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
					</el-col>
                    <el-col :span="8">
                        <el-form-item label="健康描述">
                            <el-input v-model="formData.HealthDescription" clearable />
                        </el-form-item> 
					</el-col>
                    <el-col :span="8">
                        <el-form-item label="户口性质">
                            <el-select v-model="formData.AccountNature">
                                <el-option v-for="(item, key) in optionData.AccountNature" :key="key" :label="item.name"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
					</el-col>
                </el-row>
                </div>
                <div v-if="active === 1">
                <!-- 步骤二的内容 -->
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="警号">
                            <el-input v-model="formData.PersonalNo" clearable />
                        </el-form-item>
					</el-col>
                    <el-col :span="8">
                        <el-form-item label="人员身份">
                            <el-select v-model="formData.PersonalIdentity">
                                <el-option v-for="(item, key) in optionData.PersonalIdentity" :key="key" :label="item.name"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
					</el-col>
                    <el-col :span="8">
                        <el-form-item label="人员类别">
                                <el-select v-model="formData.PersonalCategory">
                                    <el-option v-for="(item, key) in optionData.PersonalCategory" :key="key" :label="item.name"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
					</el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="管理类别">
                        <el-select  v-model="formData.ManagementCategory">
                            <el-option v-for="(item, key) in optionData.ManagementCategory" :key="key" :label="item.name"
                                :value="item.value" />
                        </el-select>
                        </el-form-item>
					</el-col>
                    <el-col :span="8">
                        <el-form-item label="人员状态">
                            <el-select v-model="formData.PersonalStatus">
                                <el-option v-for="(item, key) in optionData.PersonalStatus" :key="key" :label="item.name"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
					</el-col>
                    <el-col :span="8">
                        <el-form-item label="成员类别">
                            <el-input v-model="formData.TeamCategory" clearable />
                        </el-form-item>
					</el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="工作单位">
                            <el-input v-model="formData.WorkUnit" clearable />
                        </el-form-item>
					</el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="现任职务">
                            <el-input v-model="formData.CurrentPosition" clearable />
                        </el-form-item>
					</el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="原任职务">
                            <el-input v-model="formData.OriginalPosition" clearable />
                        </el-form-item>
					</el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="行政班子">
                            <el-tooltip class="item" effect="dark" content="是否本单位(不含内设机构)行政班子成员" placement="top">
                                                <el-icon><QuestionFilled /></el-icon>
                            </el-tooltip>
                                <el-radio-group v-model="formData.AdministrativeTeamMember" class="ml-4">
                                    <el-radio :label="0">否</el-radio>
                                    <el-radio :label="1">是</el-radio>
                                </el-radio-group>
                            </el-form-item>
					</el-col>
                    <el-col :span="8">
                        <el-form-item label="党委班子">
                            <el-tooltip class="item" effect="dark" content="是否本单位(不含内设机构)党委班子成员" placement="top">
                                                <el-icon><QuestionFilled /></el-icon>
                            </el-tooltip>
                                <el-radio-group v-model="formData.PartyCommitteeTeamMember" class="ml-4">
                                    <el-radio :label="0">否</el-radio>
                                    <el-radio :label="1">是</el-radio>
                                </el-radio-group>
                            </el-form-item>
					</el-col>
                    <el-col :span="8">
                        <el-form-item label="警种">
                            <el-select class="w-[280px]" v-model="formData.OwnPoliceKind">
                                <el-option v-for="(item, key) in optionData.OwnPoliceKind" :key="key" :label="item.name"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
					</el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="政治面貌">
                                    <el-select class="w-[280px]" v-model="formData.PoliticalStatus">
                                        <el-option v-for="(item, key) in optionData.PoliticalStatus" :key="key" :label="item.name"
                                            :value="item.value" />
                                    </el-select>
                                </el-form-item>
					</el-col>
                    <el-col :span="8">
                        <el-form-item label="组织时间">
                            <el-date-picker v-model="formData.JoinGroupDateTime" type="date"/>
                        </el-form-item>
					</el-col>
                    <el-col :span="8">
                        <el-form-item label="公务员时间">
                            <el-date-picker v-model="formData.JoinPFDateTime" type="date"/>
             
                            </el-form-item>
					</el-col>
                </el-row>
                </div>
                <div v-if="active === 2">
                <!-- 步骤三的内容 -->
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="工作时间">
                            <el-tooltip class="item" effect="dark" content="参加工作日期" placement="top">
                                                <el-icon><QuestionFilled /></el-icon>
                            </el-tooltip>
                            <el-date-picker v-model="formData.JoinWorkDateTime" type="date"/>
                        </el-form-item>
					</el-col>
                    <el-col :span="8">
                        <el-form-item label="公安时间">
                            <el-tooltip class="item" effect="dark" content="参加公安工作日期" placement="top">
                                                <el-icon><QuestionFilled /></el-icon>
                            </el-tooltip>
                            <el-date-picker v-model="formData.JoinPoliceDateTime" type="date"/>
                        </el-form-item>
					</el-col>
                    <el-col :span="8">
                        <el-form-item label="人员岗位">
                            <el-select class="w-[280px]" v-model="formData.PersonalJob">
                                <el-option v-for="(item, key) in optionData.PersonalJob" :key="key" :label="item.name"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
					</el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="工龄矫正值">
                            <el-input v-model="formData.WorkAgeCorrectionValue" clearable/>
                        </el-form-item>
					</el-col>
                    <el-col :span="8">
                        <el-form-item label="基层时间月">
                            <div class="input-group">
                            <el-tooltip class="item" effect="dark" content="基层工作经历时间" placement="top">
                                                <el-icon><QuestionFilled /></el-icon>
                            </el-tooltip>
                            <el-input v-model="formData.BaseWorkByDate" clearable/>
                            </div>
                            
                        </el-form-item>
					</el-col>
                    <el-col :span="8">
                        <el-form-item label="警衔学制年">
                            <el-tooltip class="item" effect="dark" content="警衔应加学制年限" placement="top">
                                                <el-icon><QuestionFilled /></el-icon>
                            </el-tooltip>
                            <el-select v-model="formData.PoliceRankPlusValue">
                                        <el-option v-for="(item, key) in optionData.Years" :key="key" :label="item.name"
                                            :value="item.value" />
                                    </el-select>
                        </el-form-item>
					</el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="特殊津贴">
                            <div class="input-group">
                            <el-tooltip class="item" effect="dark" content="特殊岗位津贴" placement="top">
                                                <el-icon><QuestionFilled /></el-icon>
                            </el-tooltip>
                            <el-input v-model="formData.Attach1" clearable/>
                            </div>
                            
                        </el-form-item>
					</el-col>
                    <el-col :span="8">
                        <el-form-item label="涉密标识">
                            <el-radio-group v-model="formData.SecretMark" class="ml-4">
                                <el-radio :label="0">否</el-radio>
                                <el-radio :label="1">是</el-radio>
                            </el-radio-group>
                        </el-form-item>
					</el-col>
                    <el-col :span="8">
                        <el-form-item label="警员库标志">
                            <el-radio-group v-model="formData.PolicerLibraryMark" class="ml-4">
                                <el-radio :label="0">否</el-radio>
                                <el-radio :label="1">是</el-radio>
                            </el-radio-group>
                        </el-form-item>
					</el-col>
                    
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="是否大病">
                            <el-radio-group v-model="formData.IsInjury" class="ml-4">
                                <el-radio :label="0">否</el-radio>
                                <el-radio :label="1">是</el-radio>
                            </el-radio-group>
                        </el-form-item>
					</el-col>
                    <el-col :span="8">
                        <el-form-item label="人员专长">
                                    <el-input v-model="formData.Speciality" clearable />
                                </el-form-item>
					</el-col>
                    <el-col :span="8">
					</el-col>
                     </el-row>
                     <el-row>
                    <el-col :span="24">
                        <el-form-item label="统计关系">
                            <el-input v-model="formData.relationshipUnit" clearable />
                        </el-form-item>
					</el-col>
                    <el-col :span="24">
                        <el-form-item label="人员备注">
                            <el-input v-model="formData.remark" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" clearable />
                        </el-form-item>
					</el-col>
                </el-row>
                </div>
                <div v-if="active === 3">
                <!-- 步骤四的内容 -->
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="人员编制">
                        
                        <el-select v-model="formData.PersonalType">
                                    <el-option v-for="(item, key) in optionData.PersonalType" :key="key" :label="item.name"
                                        :value="item.value" />
                                </el-select>
                    </el-form-item>
					</el-col>
                    <el-col :span="8">
                        <el-form-item label="定档类型">
                        
                        <el-select v-model="formData.WageChangeType">
                                    <el-option v-for="(item, key) in optionData.WageChangeType" :key="key" :label="item.name"
                                        :value="item.value" />
                                </el-select>
                    </el-form-item>
					</el-col>
                    <el-col :span="8">
                        <el-form-item label="工资级别">
                            <div class="input-group">
                            <el-tooltip class="item" effect="dark" content="格式为:22.1或22-1" placement="top">
                                                <el-icon><QuestionFilled /></el-icon>
                            </el-tooltip>
      <el-input v-model="formData.Wage_leave"  clearable />
    </div>
                        </el-form-item>
					</el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="工资职务">
                            <el-input v-model="formData.Wage_Position" clearable />
                        </el-form-item>
					</el-col>
                    <el-col :span="8">
                        <el-form-item label="级别工资">
                            <el-input v-model="formData.Wage_Money" clearable />
                        </el-form-item>
					</el-col>
                    <el-col :span="8">
                        <el-form-item label="学历恢复">
                            <el-tooltip class="item" effect="dark" content="学历恢复一档时间(可空)" placement="top">
                                                <el-icon><QuestionFilled /></el-icon>
                            </el-tooltip>
                            <el-date-picker v-model="formData.Wage_ResetGearForEducation" type="date"/>
                        </el-form-item>
					</el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="微调时间">
                            <el-tooltip class="item" effect="dark" content="微调时间（可空）" placement="top">
                                                <el-icon><QuestionFilled /></el-icon>
                            </el-tooltip>
                            <el-date-picker v-model="formData.Wage_FineTuningDate" type="date"/>
                           
                        </el-form-item>
                        <!-- <template #append><el-tooltip
                                    class="box-item"
                                    effect="dark"
                                    content="微调时间（可空）"
                                    placement="top-start"
                                ><el-icon><QuestionFilled /></el-icon>
                                </el-tooltip></template> -->
					</el-col>
                    <el-col :span="8">
                        <el-form-item label="新加入时间">
                            <el-tooltip class="item" effect="dark" content="新加入派出所的时间" placement="top">
                                                <el-icon><QuestionFilled /></el-icon>
                            </el-tooltip>
                            <el-date-picker v-model="formData.Wage_CreationTime" type="date">
                              
                            </el-date-picker>
                        </el-form-item>
					</el-col>
                    <el-col :span="8">
					</el-col>
                </el-row>
                </div>
                <div v-if="active === 4">
              <el-row>
                    <el-col :span="8">
                        <el-form-item label="在职变化">
                            <el-tooltip class="item" effect="dark" content="调入调出变化时间" placement="top">
                                                <el-icon><QuestionFilled /></el-icon>
                            </el-tooltip>
                            <el-date-picker v-model="formData.StatusChangedTime" type="date">
                              
                            </el-date-picker>
                        </el-form-item>
					</el-col>
                    <el-col :span="8">
                        <el-form-item label="薪资变化">
                            <el-tooltip class="item" effect="dark" content="调入调出薪资变化时间" placement="top">
                            <el-icon><QuestionFilled /></el-icon>
                        </el-tooltip>
                            <el-date-picker v-model="formData.newTime" type="date">
                              
                            </el-date-picker>
                        </el-form-item>
					</el-col>
                    <el-col :span="8">
					</el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="调动前单位">
                        
                        <el-select v-model="formData.TransferBefore">
                                    <el-option v-for="(item, key) in optionData.TransferType" :key="key" :label="item.name"
                                        :value="item.value" />
                                </el-select>
                    </el-form-item>
					</el-col>
                    <el-col :span="8">
                        <el-form-item label="调动后单位">
                        
                        <el-select v-model="formData.TransferAfter">
                                    <el-option v-for="(item, key) in optionData.TransferType" :key="key" :label="item.name"
                                        :value="item.value" />
                                </el-select>
                    </el-form-item>
					</el-col>
                        <el-col :span="8">
                        <!-- <el-form-item label="在职状态">
                        
                        <el-select v-model="formData.PersonalType">
                                    <el-option v-for="(item, key) in optionData.PersonalType" :key="key" :label="item.name"
                                        :value="item.value" />
                                </el-select>
                    </el-form-item> -->
					</el-col>
                </el-row>
                </div>
                <el-row :gutter="20">
                    <el-col :span="12" :offset="8">
                    <el-form-item class="button-group" style="text-align: center">
                        <el-button style="margin-top: 12px" @click="prevStep" v-if="active > 0">上一步</el-button>
                <el-button style="margin-top: 12px" @click="nextStep" v-if="active < 4">下一步</el-button>
                    </el-form-item>
                </el-col>
                </el-row>
                
            </el-form> 
        </popup>
    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { FormInstance } from 'element-plus'
import Popup from '@/components/popup/index.vue'
import { useDictOptions } from '@/hooks/useDictOptions'
import { userEdit,getUserDetail } from '@/api/consumer'
import { useDictData } from '@/hooks/useDictOptions'
import { QuestionFilled } from '@element-plus/icons-vue'
const active = ref(0)
const { dictData: optionData } =useDictData('BloodType,nation,MaritalStatus,HealthStatus,AccountNature,PersonalIdentity,ManagementCategory,PersonalStatus,OwnPoliceKind,PersonalJob,PoliticalStatus,Status,Relation,PersonalIdentity2,Nationality,Education,Category,Years,SchoolCategory,LearnStyle,PunishCategory,PersonalType,WageChangeType,TransferType')
/**下一步 */
const nextStep = () => {
  if (active.value < 4) active.value++ 
  
}
/**上一步 */
const prevStep = () => {
  if (active.value > 0) active.value-- 
  
}
const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('add')
const popupTitle = computed(() => {
    return mode.value == 'edit' ? '编辑用户详情' : '新增管理员'
})
const formData = reactive({
    id: '',
    realname: '',
    mobile: '',
	Nation: '',
    gender: 1,
    PersonalNo: '',
    disable: 0,
    NativePlace: '',
    BirthDay:'',
    BloodType: '',
    ResidenceDomain: '',
    GrowingPlace: '',
    ResidenceOther: '',
    IdCard: '',
    MaritalStatus: '',
    HealthStatus: '',
    HealthDescription: '',
    AccountNature: '',
    PersonalIdentity: '',
    PersonalCategory: '',
    ManagementCategory: '',
    WorkUnit: '',
    CurrentPosition: '',
    OriginalPosition: '',
    PersonalStatus: '',
    TeamCategory: '',
    AdministrativeTeamMember: '',
    PartyCommitteeTeamMember: '',
    OwnPoliceKind: '',
    PoliticalStatus: '',
    JoinGroupDateTime: '',
    JoinPFDateTime: '',
    JoinWorkDateTime: '',
    JoinPoliceDateTime: '',
    PersonalJob: '',
    BaseWorkByDate: '',
    WorkAgeCorrectionValue: '',
    PoliceRankPlusValue: '',
    Attach1: '',
    SecretMark: '',
    PolicerLibraryMark: '',
    IsInjury: '',
    RelationshipUnit: '',
    Speciality: '',
    remark: '',
    relationshipUnit: '',
    WageChangeType: '', /** 表名 wagechangeinfodatas */
    Wage_leave: '',/*工资级别 表名 wagechangeinfodatas*/
    Wage_Position: '', /*工资职务 数值型  wagechangeinfodatas*/
    Wage_Money: '',/**级别工资   wagechangeinfodatas*/
    Wage_ResetGearForEducation: '',/**学历恢复一档日期   wagechangeinfodatas*/
    Wage_FineTuningDate: '',/**微调时间   wagechangeinfodatas*/
    Wage_CreationTime: '',/**新加入时间   wagechangeinfodatas*/
    StatusChangedTime: '',
    newTime: '',
    TransferBefore: '',
    TransferAfter: '',
    PersonalType: '',
})

const formRules = reactive({

    PersonalNo: [
        {
            required: true,
            message: '请输入警号',
            trigger: ['blur']
        }
    ],
    realname: [
        {
            required: true,
            message: '请输入姓名',
            trigger: ['blur']
        }
    ]
    
})


const handleSubmit = async () => {
     await formRef.value?.validate()
	 console.log('提交的用户数据',formData);
	 
     await userEdit(formData)
     popupRef.value?.close()
    emit('success')
}

const open = (type = 'add') => {
    mode.value = type
    popupRef.value?.open()
}

const setFormData = async (row: any) => {
    const data = await getUserDetail({
        id: row.id
    })
    for (const key in formData) {
        if (data[key] != null && data[key] != undefined) {
            //@ts-ignore
            formData[key] = data[key]
        }
    }
}

const handleClose = () => {
    emit('close')
}

defineExpose({
    open,
    setFormData
})
</script>
<style>
.input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.input-group el-input {
  flex: 1;
}

.input-group .icon {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  cursor: pointer;
}
</style>